<template>
  <div>
    <h1>App</h1>
    <p>person:{{ person }}</p>
    <button @click="person.age++">年龄+</button>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import { reactive } from 'vue';

/* 
  reactive()
    - 返回一个对象的响应式代理
    - 响应式转换是 “深层” 的：它会影响到所有嵌套的属性
    - reactive只能接收对象类型的数据
*/

interface personType {
  name: string;
  age: number;
}
const person = reactive<personType>({
  name: '张三',
  age: 19,
});

console.log(person);
</script>
<style></style>
